<script setup lang="ts">
import { ElRow, ElCol, ElInput, ElButton, ElMessage } from "element-plus";
import { ref, onMounted, onUnmounted } from "vue";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
const $emit = defineEmits(['print-ready'])
const config = defineModel("config");

defineOptions({
  name: "PrintDocComponent",
});

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
const containerRef = ref();
onMounted(() => {
  console.log(config);
});

onUnmounted(() => {
  
});

let currentConnector = null;
const onDocumentReady = () => {
  console.log("onDocumentReady");
  console.log(currentConnector);
  currentConnector = DocEditor.instances.docEditor.createConnector();
  /**
   * 经测试发现，onDocumentReady时候print动作并未加载完成，所以需要timeout，具体时长请自行测试
   * 如果onDocumentReady时候直接执行，会出现页面和页码加载失效
   */
  setTimeout(() => {
    currentConnector.callCommand(
      function () {
        Api.CustomPrint();
        console.log('准备打印');
      },
      function () {
          $emit('print-ready');
          console.log('结束打印');
      }
    );
  }, 5000);
  
};
</script>

<template>
  <di class="temp_div" ref="containerRef">
    <DocumentEditor
      id="docEditor"
      :documentServerUrl="VITE_ONLY_OFFICE_BASE_URL"
      :config="config"
      :events_onDocumentReady="onDocumentReady"
      height="700px"
    />
  </di>
</template>

<style scoped>
.temp_div {
  display: block;
  height: 0;
  width: 0;
}
</style>
